import React, { useState } from 'react';
import { Card, Button } from 'antd';
import ReactEcharts from 'echarts-for-react';

// 柱状图路由组件
const Bar: React.FC = () => {
    const [{ sales, stores }, setOptionData] = useState<{
        sales: number[];
        stores: number[];
    }>({
        sales: [51, 50, 46],
        stores: [1200, 300, 200]
    });
    const update = () => {
        setOptionData(state => ({
            sales: state.sales.map(sale => sale + 50),
            stores: state.stores.map(stroe => stroe + 100)
        }));
    };
    const getOption = (sales: number[], stores: number[]) => {
        const option = {
            title: {
                text: '王者荣耀'
            },
            tooltip: {},
            legend: {
                data: ['胜率', '场数']
            },
            xAxis: {
                data: ['李白', '曜', '上官婉儿']
            },
            yAxis: {},
            series: [
                {
                    name: '胜率',
                    type: 'bar',
                    data: sales
                },
                {
                    name: '场数',
                    type: 'bar',
                    data: stores
                }
            ]
        };
        return option;
    };
    return (
        <div>
            <Card>
                <Button type="primary" onClick={update}>更新</Button>
            </Card>
            <Card title="柱状图一">
                <ReactEcharts option={getOption(sales, stores)} />
            </Card>
        </div>
    );
};

export default Bar;